<template>
<div class="progress-list">
    <div class="item" v-for="(item, i) in list" :key="i">
        <span>
            <i class="el-notification__icon el-icon-tickets"></i>
            <div class="creator">{{item.name}}</div>
        </span>
        <span>{{item.creator}}</span>
        <span>
            <i class="el-notification__icon el-icon-warning"></i>
            {{item.status}}
        </span>
        <span class="el-notification__closeBtn el-icon-close"></span>
    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    data () {
        return {
            list: [
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' },
                { name: '表名', creator: '创建人', status: '已完成' }
            ]
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {}
    }
}
</script>
<style lang="less" scoped>
    .progress-list {
        display: flex;
        align-items: center;
        flex-direction: column;
        .item {
            padding: 0 20px;
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ebeef5;
            transition: background-color .25s ease;
            border-radius: 4px;
            font-size: 12px;
            span {
                display: flex;
                align-items: center;
            }
            &:hover {
                background: #f5f7fa;
            }
        }
        .item:last-child {
            border-bottom: none;
        }
        .el-notification__closeBtn {
            position: initial;
        }
        .creator {
            padding-left: 2px;
            max-width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .el-notification__icon {
            width: 20px;
            height: 20px;
            font-size: 20px;
        }
    }
</style>
